{% extends 'Layout.html' %}
{% block content %}
    <div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">表单</div>
        <div class="panel-body">
            <form  id="addform" novalidate>
            <div class="clearfix">
{#                {% csrf_token %}#ajax提交没有必要使用csrf_token#}

                {% for field in form %}
                     <div class="col-xs-6">
                    <div class="form-group" style="position:relative; margin-bottom:20px">
                    <label>{{ field.label }}</label>
                    {{ field }}
                    <span class="error-msg" style="color:red;position:absolute">{{ field.error.0 }}</span>
                    </div>
                    </div>
                {% endfor %}
            </div>
            <div class="col-xs-12">
            <button id='btnadd' type="button" class="btn btn-primary">提交</button>
            </div>
            </form>

    </div>
</div>
    <hr/>
    <h1>Ajax学习</h1>
    <h1>任务列表</h1>
    <h3>实例1</h3>
{#    <input id='btn1' type="button" class="btn btn-primary" value="点击" onclick="clickMe();"/>#}
    <input id='btn1' type="button" class="btn btn-primary" value="点击1" />
    <h3>实例2</h3>
    <input type="text" id="txtUser" placeholder="姓名"/>
    <input type="text" id="txtAge" placeholder="年龄"/>
    <input id="btn2" type="button" class="btn btn-primary" value="点击2"/>
    <h3>实例3</h3>
    <form id="form3" >
    <input type="text" id="txtUser2" name="name" placeholder="姓名"/>
    <input type="text" id="txtAge2" name='age' placeholder="年龄"/>
    <input type="text" id="txtEmail" name='email' placeholder="邮箱"/>
    <input type="text" id="txtMore" name='more' placeholder="简介"/>
    <input id="btn3" type="button" class="btn btn-primary" value="点击3"/>
    </form>
    </div>
{% endblock %}
{% block js %}
    <script type="text/javascript">
        $(function(){
            //页面框架加载完成之后代码自动执行
            bindbtn1Event();
            bindbtn2Event();
            bindbtn3Event();
            bindbtnaddEvent();
        })
    function bindbtn1Event(){
            $("#btn1").click(function(){
                $.ajax({
            url:'/task/ajax/',
            type:"post",
            data:{
                n1:123,
                n2:456
            },
            dataType:'JSON',
            success:function(res){
                console.log(res);
                console.log(res.status)
                console.log(res.data)
            }

        })
            })
    }
    function bindbtn2Event(){
            $("#btn2").click(function(){
                $.ajax({
            url:'/task/ajax/',
            type:"post",
            data:{
                name:$('#txtUser').val(),
                age:$('#txtAge').val(),
            },
            dataType:'JSON',
            success:function(res){
                console.log(res);
                console.log(res.status)
                console.log(res.data)
            }

        })
            })
    }
    function bindbtn3Event(){
            $("#btn3").click(function(){
                $.ajax({
            url:'/task/ajax/',
            type:"post",
            <!--
            data:{
                name:$('#txtUser2').val(),
                age:$('#txtAge2').val(),
                email:$('#txtEmail').val(),
                more:$('#txtMore').val(),
            },
            -->
            data: $("#form3").serialize(),

            dataType:'JSON',
            success:function(res){
                {#console.log(data);#}
                console.log(res);
                console.log(res.status);
                console.log(res.data);
            }

        })
            })
    }
    function bindbtnaddEvent(){
            $("#btnadd").click(function(){
                {#$('.error-msg').text("");#}
                $('.error-msg').empty("");
                $.ajax({
            url:'/task/add/',
            type:"post",

            data: $("#addform").serialize(),
            {#data: $("#addform").serialize() + "&csrfmiddlewaretoken={{ csrf_token }}",#}

            dataType:'JSON',
            success:function(res){
                {#console.log(data);#}
                console.log(res);
                if(res.status){
                    alert("添加成功")
                }
                else{
                    {#console.log(res.error);#}
                    $.each(res.error,function(name,data){
                        console.log(name,data);
                        $("#id_"+name).next().text(data[0]);
                    })
                }
            }

        })
            })
    }
    {#function clickMe(){#}
    {#    console.log("点击了按钮")#}
    {#    $.ajax({#}
    {#        url:'/task/ajax/',#}
    {#        type:"post",#}
    {#        data:{#}
    {#            n1:123,#}
    {#            n2:456#}
    {#        },#}
    {#        success:function(res){#}
    {#            console.log(res);#}
    {#        }#}
    {##}
    {#    })#}
    {#    {#}
    </script>
{% endblock %}